<template>
  <div class="home">
    <div class="search">
      <router-link :to="'/home/ChosePlot/' + cityId" tag="div" class="drop">
        <span>{{village}}</span>
        <span class="drop-icon" v-show="village"></span>
      </router-link>
      <router-link :to="'/home/ChosePlot/' + cityId" class="search-icon" tag="span"></router-link>
    </div>
    <!--图片轮播-->
    <div class="swiper-box">
      <mt-swipe :auto="5000">
        <mt-swipe-item>
          <img src="../../assets/banner@2x.png" alt="">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../../assets/banner1@2x.png" alt="">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../../assets/banner2@2x.png" alt="">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../../assets/banner3@2x.png" alt="">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <ul class="mainmenu clearfix">
      <li>
        <router-link :to="'/home/VillageNotice/'+areaId"><b class="one"></b><span>通知公告</span></router-link>
      </li>
      <li>
        <router-link to="/home/VotingList">
          <b class="two"></b>
          <div v-if="issup===1"
               style="width: 10px;height: 10px;background: #ff4444;border-radius: 50%;position: absolute;right: 30px;top: 10px;"></div>
          <span>业主大会</span>
        </router-link>
      </li>
      <!--<li>-->
      <!--<router-link to="/home/Voting">-->
      <!--<b class="three"></b>-->
      <!--<div v-if="iscan===1"-->
      <!--style="width: 10px;height: 10px;background: #ff4444;border-radius: 50%;position: absolute;right: 30px;top: 10px;"></div>-->
      <!--<span>选举投票</span>-->
      <!--</router-link>-->
      <!--</li>-->
      <li>
        <router-link to="/home/Governance"><b class="four"></b><span>治理透明</span></router-link>
      </li>
      <!--<li>-->
      <!--<a href="https://g2.zunweikj.com"><b class="five"></b><span>一键缴费</span></a>-->
      <!--</li>-->
      <!--<li>-->
      <!--<router-link to="/home/Repairs"><b class="six"></b><span>物业报修</span></router-link>-->
      <!--</li>-->
      <!--<li><a href="http://www.hzpolice.gov.cn/hzwx/Module/WeiXin/weiservice.aspx?membertype=1"><b-->
      <!--class="seven"></b><span>办事指南</span></a></li>-->
      <!--<li>-->
      <!--<a href="https://map.baidu.com/mobile/webapp/index/index"><b class="eight"></b><span>周边服务</span></a>-->
      <!--</li>-->
      <!--<li @click="welfare()"><a href="javascript:;"><b class="nine"></b><span>生活福利</span></a></li>-->
      <li>
        <!--<router-link to="/home/RentSale"><b class="ten"></b><span>房屋租售</span></router-link>-->
        <a href="/home/RentSale"><b class="ten"></b><span>租售中心</span></a>
      </li>
      <li>
        <router-link to="/home/SeekHelp"><b class="eleven"></b><span>邻里求助</span></router-link>
      </li>
      <li>
        <router-link to="/home/Unused"><b class="twelve"></b><span>邻里闲置</span></router-link>
      </li>
    </ul>
    <div class="split"></div>
    <div class="notice" v-if="flag">
      <div class="title" v-show="details.length">
        <p class="h5">最新公告</p>
        <router-link :to="'/home/VillageNotice/'+areaId">
          <p>更多 >></p>
        </router-link>
      </div>
      <mt-cell
        :title="item.title"
        :to="'/home/VillageDetail/'+item.id"
        is-link
        v-for="(item,index) in details" :key="index"
      >
      </mt-cell>
    </div>
    <div class="split" v-show="rentlists.length && details.length"></div>
    <div class="rent-sales" v-if="flag">
      <div class="title border-bottom" v-show="rentlists.length">
        <p class="h5" ref="lat">最新租售</p>
        <router-link to="/home/RentSale">
          <p>更多 >></p>
        </router-link>
      </div>
      <ul>
        <li v-for="(rent,index) in rentlists" :key="index" class="border-bottom-last">
          <router-link :to="'/home/RentDetail/'+rent.id">
            <div class="rent_img">
              <div v-show="rent.img[0]" class="img" :style="'backgroundImage:url('+rent.img[0]+')'"></div>
              <img src="../../assets/imgDefault.png" alt="" v-show="!rent.img[0]">
            </div>
            <span class="des">{{rent.content}}</span>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="split" v-show="seeklists.length && rentlists.length"></div>
    <div class="linli" v-if="flag">
      <div class="title border-bottom" v-show="seeklists.length">
        <p class="h5">最新邻里求助</p>
        <router-link to="/home/SeekHelp">
          <p>更多 >></p>
        </router-link>
      </div>
      <mt-cell
        :title="seek.title"
        :to="'/home/HelpDetail/'+seek.id"
        is-link
        v-for="(seek,index) in seeklists" :key="index"
      >
      </mt-cell>
    </div>
    <v-footer></v-footer>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .home {
    background-color: #fff;
    padding-bottom: 60px;
    .mint-cell-text {
      @include ellipsis(1);
      line-height: 20px;
    }
    .mint-cell-wrapper {
      background-size: 100% 1px;
      background-position: bottom left;
    }
    .mint-cell:last-child {
      background-size: 100% 0;
      .mint-cell-wrapper {
        background-size: 100% 0px;
      }
    }
    .search {
      position: relative;
      background-color: #0C7AD9;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 17px;
      color: #fff;
      // @include border-bottom-1px(#d9d9d9);
      .drop {
        display: inline-block;
        .drop-icon {
          display: inline-block;
          width: 16px;
          height: 9px;
          background-size: 16px 9px;
          background-repeat: no-repeat;
          @include bgimg('../header/images/xialajiantou');
        }
      }
      .search-icon {
        position: absolute;
        top: 10px;
        right: 8px;
        width: 18px;
        height: 18px;
        background-size: 18px 18px;
        background-repeat: no-repeat;
        @include bgimg('./images/sousuo');
      }
    }
    .swiper-box {
      height: 160px;
      .mint-swipe {
        width: 100%;
        height: 160px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        .mint-swipe-item {
          img {
            width: 100%;
            height: 160px;
          }
        }
      }
    }
    .mainmenu {
      width: 100%;
      margin-bottom: 10px;
      li {
        float: left;
        width: 33%;
        overflow: hidden;
        position: relative;
        a {
          display: block;
          text-align: center;
          text-decoration: none;
          b {
            display: inline-block;
            margin: 14px auto 7px;
            height: 30px;
            width: 30px;
            background-size: 30px 30px;
            background-repeat: no-repeat;
            @include bgimg("./images/gonggao");
            &.two {
              @include bgimg("./images/yezhudahui");
            }
            &.three {
              @include bgimg("./images/vote2");
            }
            &.four {
              @include bgimg("./images/zltm");
            }
            &.five {
              @include bgimg("./images/pay");
            }
            &.six {
              @include bgimg("./images/baoxiu");
            }
            &.seven {
              @include bgimg("./images/guide");
            }
            &.eight {
              @include bgimg("./images/zbfw");
            }
            &.nine {
              @include bgimg("./images/fuli");
            }
            &.ten {
              @include bgimg("./images/zszx");
            }
            &.eleven {
              @include bgimg("./images/help");
            }
            &.twelve {
              @include bgimg("./images/xianzhi");
            }
          }
          span {
            display: block;
            color: black;
            font-size: 13px;
          }
        }
      }
    }
    .split {
      width: 100%;
      height: 10px;
      background-color: #F2F2F2;
    }
    .notice {
      padding: 10px 0px 0 0px;
      .title {
        margin: 0 10px;
        padding-bottom: 25px;
        font-size: 15px;
        color: rgb(0, 0, 0);
        // @include border-bottom-1px(#d9d9d9);
        .h5 {
          float: left;
          font-size: 15px;
          color: #000;
          font-weight: bold;
        }
        p {
          float: right;
          font-size: 13px;
          color: #777;
        }
      }
    }
    .linli {
      padding: 10px 0px 0 0px;
      .title {
        padding-bottom: 25px;
        font-size: 15px;
        margin: 0 10px;
        color: rgb(0, 0, 0);
        // @include border-bottom-1px(#d9d9d9);
        .h5 {
          float: left;
          font-size: 15px;
          color: #000;
          font-weight: bold;
        }
        p {
          float: right;
          font-size: 13px;
          color: #777;
        }
      }
    }
    .rent-sales {
      padding: 10px 10px 0 10px;
      .title {
        padding-bottom: 25px;
        font-size: 15px;
        color: rgb(0, 0, 0);
        // @include border-bottom-1px(#d9d9d9);
        .h5 {
          float: left;
          font-size: 15px;
          color: #000;
          font-weight: bold;
        }
        p {
          float: right;
          font-size: 13px;
          color: #777;
        }
      }
      ul {
        li {
          padding: 10px 0;
          height: 55px;
          // @include border-bottom-1px(#d9d9d9);
          // &:last-child {
          //   @include border-none();
          // }
          .rent_img {
            float: left;
            display: inline-block;
            vertical-align: middle;
            font-size: 0;
            height: 55px;
            width: 55px;
            .img {
              width: 100%;
              height: 100%;
              background-size: cover;
            }
            img {
              width: 100%;
              height: 100%;
              background-size: cover;
            }
          }
          .des {
            float: left;
            vertical-align: middle;
            margin-left: 10px;
            // font-weight: 700;
            font-size: 15px;
            color: rgb(41, 41, 41);
            line-height: 55px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 78%;
          }
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import Footer from '../footer/Footer.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import {
    loadVillageId,
    loadTitle,
    loadCityId,
    loadCity,
    saveCity,
    saveCityId,
    saveVillageId,
    saveTitle,
    loadOpenId,
    saveOpenId,
    saveUserId,
    loadUserId,
    saveCityCode,
    loadCityCode,
    saveTIME,
    loadTIME,
    saveOVER,
    loadOVER
  } from '../../common/js/cache.js'
  import { getQueryString } from '../../common/js/getQueryString.js'
  import wx from 'weixin-js-sdk'
  import { Toast } from 'mint-ui'
  import { getVillageList, getOpenId, getConfig, getAreasId, passOpenId } from '../../api/homeLogin.js'

  export default {
    name: 'Home',
    data () {
      return {
        details: [],
        lists: [],
        rentlists: [],
        seeklists: [],
        areaId: loadVillageId(),
        cityId: loadCityId() || 3,
        // cityId: loadCityId(),
        village: loadTitle() || '请选择小区',
        // village: loadTitle(),
        city: loadCity(),
        openid: loadOpenId(),
        userid: loadUserId(),
        flag: false,
        issup: '', // 判断有无事物投票
        iscan: '', // 判断有无选举投票
        city_code: loadCityCode,
        time_stamp: '', // 获取当前时间戳用于跟缓存时间戳进行判断
        over: false // 判断用户登录是否过期
      }
    },
    created () {
      this._getLatLng()
      if (loadVillageId()) {
        this.areaId = loadVillageId()
        this._getVillageList(this.areaId)
      }
      // 如果是用户搜索小区进入页面的话通过url地址来保存小区id小区名称城市id城市名称
      if (getQueryString('areas_id') && getQueryString('code') === null) {
        this.village = getQueryString('areas_name')
        this.cityId = parseInt(getQueryString('city_id'))
        this.city = getQueryString('city_name')
        // this.openid = getQueryString('open_id')
        this.areaId = parseInt(getQueryString('areas_id'))
        saveCity(this.city)
        saveCityId(this.cityId)
        saveVillageId(this.areaId)
        saveTitle(this.village)
        if (this.openid) {
          saveOpenId(this.openid)
          this._passOpenId(this.openid)
        } else {
          // window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxae1d85bfd66812e6&redirect_uri=https%3A%2F%2Fynwx.zgwyzxw.cn%2F&response_type=code&scope=snsapi_userinfo&state=89e0440c0f961acf72521cda57d897f0#wechat_redirect'
        }
      }
      if (!getQueryString('code') && !this.openid && !this.userid) {
        if (window.location.href.indexOf('http://localhost') === 0 || window.location.href.indexOf('http://10.0.0') === 0) {
          // saveOpenId('oHVoI1YFA6zvN1ymtrO4WrrRrmzA')
          // saveUserId(891)
          saveOpenId('oHVoI1YSCHpddlq7bEXa62gcdbTA')
          saveUserId(888)
          // saveOpenId('oHVoI1bbXI6df9tGbb305ZPsFO8U')
          // saveUserId(884)
          // saveOpenId('oHVoI1bD4bvEsywKl-_iAtLmVUj0')
          // saveUserId(892)
          // saveOpenId('oHVoI1R5bM0DJ-UC-wxJBvKNK13g')
          // saveUserId(885)
        } else {
          // 重定向页面，域名发生改变
          // 测试
          window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxae1d85bfd66812e6&redirect_uri=https%3A%2F%2Fynwx.zgwyzxw.cn%2F&response_type=code&scope=snsapi_userinfo&state=89e0440c0f961acf72521cda57d897f0#wechat_redirect'
          // 正式
          // window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx07bb0836a18cbb59&redirect_uri=https%3A%2F%2Fynzx.zgwyzxw.cn%2F&response_type=code&scope=snsapi_userinfo&state=89e0440c0f961acf72521cda57d897f0#wechat_redirect'
        }
      }
      this.over = loadOVER()
      if (getQueryString('code') != null && ((!this.openid && !this.userid) || this.over)) {
        this.over = false
        this._getOpenId()
      } else {
        this.time_stamp = new Date().getTime()
        if (loadTIME() === undefined || loadTIME() + 604800000 < this.time_stamp) {
          saveOVER(true)
          // 测试
          // window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxae1d85bfd66812e6&redirect_uri=https%3A%2F%2Fynwx.zgwyzxw.cn%2F&response_type=code&scope=snsapi_userinfo&state=89e0440c0f961acf72521cda57d897f0#wechat_redirect'
          // 正式
          // window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx07bb0836a18cbb59&redirect_uri=https%3A%2F%2Fynzx.zgwyzxw.cn%2F&response_type=code&scope=snsapi_userinfo&state=89e0440c0f961acf72521cda57d897f0#wechat_redirect'
        }
      }
      if (loadOpenId() && !this.userid) {
        this._passOpenId(loadOpenId())
      }
    },
    methods: {
      _getLatLng () {
        getConfig().then(res => {
          if (res.code === 200) {
            wx.config({
              debug: false,
              appId: res.data.appId,
              nonceStr: res.data.nonceStr,
              rawString: res.data.rawString,
              signature: res.data.signature,
              timestamp: res.data.timestamp,
              jsApiList: [
                'getLocation',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
              ]
            })
            var th = this
            wx.ready(() => {
              if (!loadVillageId()) {
                wx.getLocation({
                  type: 'gcj02',
                  success: function (res) {
                    th._getAreasId(res.longitude, res.latitude)
                  },
                  cancel: function () {
                    saveCity('杭州')
                    saveCityId(3)
                  },
                  fail: function () {
                    saveCity('杭州')
                    saveCityId(3)
                  }
                })
                if (!loadVillageId()) {
                  saveCity('杭州')
                  saveCityId(3)
                }
              }
              setTimeout(function () {
                var params = {
                  title: '邻里在线', // 分享标题
                  desc: loadTitle(),
                  link: `${commonUrl.apihost}home?areas_name=${loadTitle()}&areas_id=${loadVillageId()}&city_id=${loadCityId()}&city_name=${loadCity()}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: 'http://pic.zgwyzxw.cn/rentHouse/76378385098872122.png', // 分享图标
                  success: function () {
                  },
                  cancel: function () {
                  }
                }
                wx.onMenuShareTimeline(params)
                wx.onMenuShareAppMessage(params)
                wx.onMenuShareQQ(params)
                wx.onMenuShareWeibo(params)
                wx.onMenuShareQZone(params)
              }, 1000)
            })
          }
        })
      },
      // 去城市页面
      toChoseCity () {
        this.$router.push('/home/ChoseCity')
      },
      // 通过经纬度来获取小区名称,小区id，城市名称，城市id并保存
      _getAreasId (lng, lat) {
        getAreasId(lng, lat).then(res => {
          this.areaId = res.data.areas_id
          this.village = res.data.village
          this.cityId = res.data.city_id
          this.city = res.data.city_title
          this.city_code = res.data.city_code
          // 保存城市名称和城市id
          saveCity(this.city)
          saveCityId(this.cityId)
          saveVillageId(this.areaId)
          saveTitle(this.village)
          saveCityCode(this.city_code)
          // 调用获取首页公告
          this._getVillageList(this.areaId)
        })
      },
      // 刚进首页通过经纬度后通过小区id获取当前小区公告，租售列表，求助列表
      _getVillageList (id) {
        getVillageList(id).then(res => {
          if (res.code === 200) {
            this.details = res.data.article
            this.rentlists = res.data.house
            this.seeklists = res.data.neighbor
            // isSup和isCan 0是没有投票  1是有投票
            this.issup = res.data.isSup
            this.iscan = res.data.isCan
            this.flag = true
          }
        })
      },
      // 获取微信用户openId和userid
      _getOpenId () {
        getOpenId().then(res => {
          if (res.code === 200) {
            this.openid = res.data[0].open_id
            this.userid = res.data[0].id
            saveOpenId(this.openid)
            saveUserId(this.userid)
            saveTIME(new Date().getTime())
            saveOVER(this.over)
          }
        })
      },
      _passOpenId (id) {
        passOpenId(id).then(res => {
          this.userid = res.data[0].id
          saveUserId(this.userid)
        })
      },
      // 生活福利弹窗
      welfare () {
        Toast({
          message: '暂未开通',
          position: 'middle',
          duration: 1500
        })
      }
    },
    components: {
      headTop,
      'v-footer': Footer
    }
  }
</script>
